<script setup lang="ts">
import { useUserInfo } from '../composable/useUserInfo'

definePage({
  style: {
    navigationBarTitleText: '当前用户信息',
    navigationStyle: 'custom',
  },
})

const { userInfo, loading, fetchUserInfo } = useUserInfo()

// 页面加载时获取用户信息
onLoad(() => {
  fetchUserInfo()
})

// 性别显示文本
function getGenderText(gender: 0 | 1 | 2) {
  const genderMap = {
    0: '未知',
    1: '男',
    2: '女',
  }
  return genderMap[gender]
}

// 格式化日期
function formatDate(dateString: string) {
  if (!dateString)
    return '--'
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN')
}

// 默认头像
const defaultAvatar = '/static/images/default-avatar.png'

// 返回上一页
function goBack() {
  uni.navigateBack()
}
</script>

<template>
  <view class="min-h-screen bg-gray-100">
    <!-- 自定义导航栏 -->
    <sar-navbar
      title="当前用户信息"
      status-bar show-back fixed
      @back="goBack"
    />

    <!-- 内容区域 -->
    <view class="pt-[var(--sar-navbar-height)]">
      <!-- 加载状态 -->
      <view v-if="loading" class="flex items-center justify-center py-20">
        <sar-loading size="40rpx" type="clock" />
        <text class="ml-2 text-gray-500">加载中...</text>
      </view>

      <!-- 用户详细信息 -->
      <view v-else-if="userInfo" class="p-4 space-y-4">
        <!-- 头像和基本信息卡片 -->
        <view class="rounded-xl bg-white p-6 shadow-sm">
          <view class="flex flex-col items-center space-y-4">
            <image
              :src="userInfo.avatar || defaultAvatar"
              class="h-24 w-24 rounded-full bg-gray-100"
              mode="aspectFill"
            />
            <view class="text-center">
              <view class="text-xl text-gray-900 font-semibold">
                {{ userInfo.nickname || userInfo.username }}
              </view>
              <view class="mt-1 text-gray-500">
                @{{ userInfo.username }}
              </view>
              <view v-if="userInfo.deptName" class="mt-2 rounded-full bg-blue-50 px-3 py-1 text-sm text-blue-600">
                {{ userInfo.deptName }}
              </view>
            </view>
          </view>
        </view>

        <!-- 详细信息卡片 -->
        <view class="rounded-xl bg-white p-6 shadow-sm">
          <view class="mb-4 text-lg text-gray-900 font-semibold">
            详细信息
          </view>

          <view class="space-y-4">
            <!-- 性别 -->
            <view class="flex items-center justify-between border-b border-gray-100 pb-3">
              <view class="flex items-center space-x-2">
                <view class="i-carbon-user text-gray-400" />
                <view class="text-gray-600">
                  性别
                </view>
              </view>
              <view class="text-gray-900">
                {{ getGenderText(userInfo.gender) }}
              </view>
            </view>

            <!-- 邮箱 -->
            <view v-if="userInfo.email" class="flex items-center justify-between border-b border-gray-100 pb-3">
              <view class="flex items-center space-x-2">
                <view class="i-carbon-email text-gray-400" />
                <view class="text-gray-600">
                  邮箱
                </view>
              </view>
              <view class="text-gray-900">
                {{ userInfo.email }}
              </view>
            </view>

            <!-- 手机号 -->
            <view v-if="userInfo.phone" class="flex items-center justify-between border-b border-gray-100 pb-3">
              <view class="flex items-center space-x-2">
                <view class="i-carbon-phone text-gray-400" />
                <view class="text-gray-600">
                  手机号
                </view>
              </view>
              <view class="text-gray-900">
                {{ userInfo.phone }}
              </view>
            </view>

            <!-- 注册时间 -->
            <view class="flex items-center justify-between border-b border-gray-100 pb-3">
              <view class="flex items-center space-x-2">
                <view class="i-carbon-calendar text-gray-400" />
                <view class="text-gray-600">
                  注册时间
                </view>
              </view>
              <view class="text-gray-900">
                {{ formatDate(userInfo.registrationDate) }}
              </view>
            </view>

            <!-- 最后登录时间 -->
            <view v-if="userInfo.lastLoginTime" class="flex items-center justify-between border-b border-gray-100 pb-3">
              <view class="flex items-center space-x-2">
                <view class="i-carbon-time text-gray-400" />
                <view class="text-gray-600">
                  最后登录
                </view>
              </view>
              <view class="text-gray-900">
                {{ formatDate(userInfo.lastLoginTime) }}
              </view>
            </view>
          </view>
        </view>

        <!-- 个人简介卡片 -->
        <view v-if="userInfo.description" class="rounded-xl bg-white p-6 shadow-sm">
          <view class="mb-4 text-lg text-gray-900 font-semibold">
            个人简介
          </view>
          <view class="rounded-lg bg-gray-50 p-4 text-gray-700 leading-relaxed">
            {{ userInfo.description }}
          </view>
        </view>

        <!-- 权限信息卡片 -->
        <view v-if="userInfo.roles?.length || userInfo.permissions?.length" class="rounded-xl bg-white p-6 shadow-sm">
          <view class="mb-4 text-lg text-gray-900 font-semibold">
            权限信息
          </view>

          <!-- 角色 -->
          <view v-if="userInfo.roleNames?.length" class="mb-4">
            <view class="mb-2 text-sm text-gray-600">
              角色
            </view>
            <view class="flex flex-wrap gap-2">
              <view
                v-for="role in userInfo.roleNames"
                :key="role"
                class="rounded-full bg-purple-50 px-3 py-1 text-sm text-purple-600"
              >
                {{ role }}
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 无数据状态 -->
      <view v-else class="flex flex-col items-center justify-center py-20">
        <view class="i-carbon-user-avatar text-6xl text-gray-300" />
        <view class="mt-4 text-gray-500">
          暂无用户信息
        </view>
        <sar-button
          type="default"
          size="small"
          class="mt-4"
          @click="fetchUserInfo"
        >
          重新加载
        </sar-button>
      </view>
    </view>
  </view>
</template>

<style scoped>
</style>
